﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>气象</title>
<link href="static/ol3/ol.css" type="text/css" rel="stylesheet">
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="static/css/qixiang.css" rel="stylesheet" type="text/css">
</head>

<body>
<!-- 工具 -->
<div class="btn_toolsbox pf" style="top:20px; right: 20px;">
    <ul class="btn_tools clearfix">
        <li id="btntip1"><a href="javascript:;" title="影像图"><i class="fa fa-photo" title=""></i></a></li>      
        <li id="btntip2"><a href="javascript:;" title="矢量图"><i class="fa fa-braille" title=""></i></a></li>        
        <li id="btntip4"><a href="javascript:;" title="二维"><i class="fa fa-square-o" title=""></i></a></li>
        <li id="btntip5"><a href="javascript:;" title="三维"><i class="fa fa-globe" title=""></i></a></li>
        <li id="btntip6"><a href="javascript:;" title="二三维"><i class="fa fa-cc" title=""></i></a></li>
        <li id="btntip7"><a href="javascript:;" title="当前位置"><i class="fa fa-map-marker" title=""></i></a></li>      
        <li id="btntip8"><a href="javascript:;" title="默认视图"><i class="fa fa-object-group" title=""></i></a></li>      
        <li id="btntip9"><a href="javascript:;" title="全屏"><i class="fa fa-arrows" title=""></i></a></li>            
    </ul>
</div>
<!-- 工具end -->


<!-- 大屏浮框列表-->
<div class="dp_xuanfubox pf" style="bottom: 10px; right: 35px;">
    <h2>功能 <i class="fa fa-minus-square-o" aria-hidden="true"></i></h2>
    <ul>                
        <li class="hastu">
            <p><i class="fa fa-thermometer-quarter" aria-hidden="true"></i> 温度 <i class="fa fa-angle-down fr mt10" aria-hidden="true"></i></p>
            <ol>
                <li><p>地表温度</p></li>
                <li><p>高空温度</p></li>                
            </ol>
        </li>
        <li class="hastu"><p><i class="fa fa-mixcloud" aria-hidden="true"></i> 云</p></li>
        <li class="hastu"><p><i class="fa fa-snowflake-o" aria-hidden="true"></i> 雨、雪</p></li>        
        <li class="hastu"><p><i class="fa fa-tachometer" aria-hidden="true"></i> 气压 <i class="fa fa-angle-down fr mt10" aria-hidden="true"></i></p>
            <ol>
                <li><p>1000百帕</p></li>
                <li><p>2000百帕</p></li>                
            </ol>
        </li>        


    </ul>
</div>

<!-- 图例 -->
<div class="tulibox pf" style="bottom: 10px; right: 0;">
</div>
<!-- 图例end -->


<!-- 播放器 -->
<div class="timeplaybox pf"  style="left:15px; bottom: 10px;right: 185px; ">
    <div class="timeplay"></div>
    <div class="contral"><i class="fa fa-play-circle"></i></div>
</div>


<!-- 大屏地图区 -->
<div class="daping_mapbox">
    <img src="static/images/daping_map.jpg" width="100%" height="100%">
</div>
<!-- 大屏地图区end -->


	<script src="static/jquery/jquery-2.1.4.min.js"></script>
	<script src="static/bootstrap/js/bootstrap.min.js"></script>
	<script src="static/js/jquery-PlayBar.min.js"></script>

<script type="text/javascript">
$(function(){
    //悬浮菜单
    $(".dp_xuanfubox ul >li").bind('click',function(){

        $(this).addClass('on').siblings('li').removeClass('on');  
        $(".dp_xuanfubox p").removeClass('redbg');
        $(this).find('>p').addClass('redbg')
    });
    
    $(".dp_xuanfubox ol li > p").bind('click',function(e){
        event.stopPropagation(e);
        $(".dp_xuanfubox p").removeClass('redbg');
        $(this).addClass('redbg');
    });

    $(".dp_xuanfubox h2").bind('click',function(){
        var $i = $(this).find('i');
        $i.toggleClass("fa-plus-square-o");
        $(".dp_xuanfubox ul").toggle();
    });    
    $(".dp_xuanfubox  ul li ol li").bind('click',function(){
        $(this).parents('li').find('p').removeClass('redbg')
    });


    //播放器
    var action=true;
    $('.contral').click(function(){
        if(action){
            $.playBar.Stop();
                action=false;
                $(this).html("<i class='fa fa-play-circle'></i>");
            }else{
                $.playBar.Begin();
                action=true;
                $(this).html("<i class='fa fa-pause'></i>");
            }
        });
    $.playBar.addBar($('.timeplay'),1000*600);//第一个参数是需要显示播放器的容器，第二个参数为时间，单位毫秒
    $.playBar.changeBarColor("#9d0300");//设置进度条颜色
})    
</script>
</body>
</html>

